// Vocationaltraining
import React from 'react' ;
import { Row,Col } from 'antd' ;
import './Vocationaltraining.scss' ;
import jypx_banner from '../../static/Vocationaltraining/jypx_banner.jpg' ;
import jypx_peixunzixun from '../../static/Vocationaltraining/jypx_peixunzixun.jpg' ;
import v_hangyezixun from '../../static/Vocationaltraining/v_hangyezixun.jpg' ;
import v_guanlizhihui from '../../static/Vocationaltraining/v_guanlizhihui.jpg' ;
import v_caiwuzixun from '../../static/Vocationaltraining/v_caiwuzixun.jpg' ;
import v_caijingmeiti from '../../static/Vocationaltraining/v_caijingmeiti.jpg' ;
import v_peixunkecheng from '../../static/Vocationaltraining/v_peixunkecheng.jpg' ;
import v_peixundaoshi from '../../static/Vocationaltraining/v_peixundaoshi.jpg' ;

import Bannel_title from '../../component/Bannel_title/Bannel_title' ;
import $ from "jquery";

let news_pic_arr = [v_hangyezixun,v_guanlizhihui,v_caiwuzixun,v_caijingmeiti] ;


class Vocationaltraining extends React.Component{
    constructor(props){
        super(props) ;
        this.state = {
            home_news : news_pic_arr[0] ,
        }
    }
    homeNewsChange(value,e){
        $(".Vocationaltraining_news span").removeClass('activeSpan') ;
        $(e.target).addClass('activeSpan') ;
        let pic = news_pic_arr[value] ;
        this.setState({
            home_news : pic,
        })
    }
    render(){
        return(
            <div className={`Vocationaltraining`}>
                <div className={`Vocationaltraining_banner`}>
                    <img src={jypx_banner} alt="等待加载"/>
                </div>
                <div className='Vocationaltraining_peixunzixun container'>
                    <Bannel_title title={`培训咨询`}/>
                    <img src={jypx_peixunzixun} alt="等待加载" style={{ width:'100%' }}/>
                </div>
                <div className={`Vocationaltraining_news container`}>
                    <Row gutter={24}>
                        <Col span={3}>
                            <span onClick={this.homeNewsChange.bind(this,0)} className={`activeSpan`}>行业资讯</span>
                            <span onClick={this.homeNewsChange.bind(this,1)}>管理智慧</span>
                            <span onClick={this.homeNewsChange.bind(this,2)}>财务资讯</span>
                            <span onClick={this.homeNewsChange.bind(this,3)}>财经媒体</span>
                        </Col>
                        <Col span={21}>
                            <img src={this.state.home_news} style={{ width:'100%' }}/>
                        </Col>
                    </Row>
                </div>
                <div className='container'>
                    <img src={v_peixunkecheng} alt="等待加载" style={{ width:'100%',marginTop:'20px' }}/>
                </div>
                <div className='Vocationaltraining_daoshi container'>
                    <Bannel_title title={`培训导师`}/>
                    <img src={v_peixundaoshi} alt="等待加载" style={{ width:'100%' }}/>
                </div>
            </div>
        )
    }
}

export default Vocationaltraining ;